<template>
    <div>
        <city-header></city-header>
        <city-search :cities='cities'></city-search>
        <city-list :cities='cities' :hot='hotCities' :letter='letter'></city-list>
        <!-- 定义子组件上$emit触发的函数change-->
        <city-alpha :cities='cities' @change='handLetterChange'></city-alpha>
    </div>
</template>

<script>
import axios from 'axios'
import cityHeader from './component/cityHeader'
import citySearch from './component/citySearch'
import cityList from './component/cityList'
import cityAlpha from './component/cityAlpha'
export default {
    data (){
        return {
            cities:{},
            hotCities:[],
            // 将子组件alpha的innerText再传递给兄弟组件list
            letter:''
        }
    },
    components:{
        cityHeader,
        citySearch,
        cityList,
        cityAlpha
    },
    methods: {
        getCityInfo(){
            axios.get('http://localhost:3001/data')
            .then(res=>{
                // console.log(res)
                this.cities=res.data.cities
                this.hotCities=res.data.hotCities
            })
        },
        // 接收cityAlpha传来的数据
        handLetterChange(data){
            this.letter=data
            
        }
    },
    mounted() {
        this.getCityInfo()
    },
}
</script>

<style lang="less" scoped>

</style>
